<template>
    <ul>
        <li :class="{active:$route.path==item.path}" v-for="item in navData" :key="item.id" @click="navChange(item.path)">{{item.name}}</li>
    </ul>
</template>
<script>
export default {
    name:"navList",
    components:{},
    data(){
        return {
            navData:[]
        }
    },
    created(){
        let data=[
            {id:1,name:'餐桌管理',path:'/tableManagementView'},
            {id:2,name:'菜品管理',path:'/foodManagementView'},
            {id:3,name:'点菜管理',path:'/orderManagementView'},
            {id:4,name:'会员管理',path:'/memberManagementView'},
            {id:5,name:'收银',path:'/cashierView'},
            {id:6,name:'人员管理',path:'/personnelManagementView'}
        ]
        let navData=data.map(item=>{
            item.path='/home'+item.path;
            return item;
            })
        this.navData=navData;
    },
    methods:{
        navChange(url){
            this.$router.push(url);
        }
    }
}
</script>
<style lang="less" scoped>
ul{
    width: 100%;
    margin: 0;
    padding: 0;
    li{
        width:100%;
        padding:25px;
        box-sizing: border-box;
        background-color: #343F50;
        list-style: none;
        cursor: pointer;
        color: gray;
    }
}
.active{
    background-color: #2A3240;
    color:white
}
</style>